<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Position Helper</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.min.js'></script>
    <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.css' type='text/css' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
        #target { 
            position:absolute; top:0; bottom:0; width:100%;
            display: flex; justify-content: center; align-items: center;
            pointer-events: none;
        }
        #target img { width:50px; height:50px; }
        #position { 
            position:absolute; top:0; height: 80px; width: 300px; 
            background-color: #fff;
            padding: 15px;
            margin: 10px;
            font-family: 'Courier New', Courier, monospace;
        }
    </style>
</head>
<body>

<div id='map'></div>
<div id="target"><img src="images/target.svg" alt=""></div>
<div id="position"></div>

<script>
    var position = document.getElementById("position");

    mapboxgl.accessToken = 'pk.eyJ1IjoibWJ4c29sdXRpb25zIiwiYSI6ImNrMm01aG9hdTBlZGwzbXQ1ZXVrNHNmejAifQ.QHQA0N6XPWddCXtvoODHZg';
    var map = new mapboxgl.Map({
        container: 'map', // container id
        style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
        center: [-74.50, 40], // starting position [lng, lat]
        zoom: 9, // starting zoom
        pitch: 45,
        bearing: -40
    });

    map.addControl(new MapboxGeocoder({
        accessToken: mapboxgl.accessToken,
        mapboxgl: mapboxgl
    }));

    map.addControl(new mapboxgl.NavigationControl());
    
    map.on("load", function() {
        updatePosition();
        map.addSource('mapbox-dem', {
            'type': 'raster-dem',
            'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',
            'tileSize': 512,
            'maxzoom': 14
        });
        // add the DEM source as a terrain layer with exaggerated height
        map.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1.5 });

        // add a sky layer that will show when the map is highly pitched
        map.addLayer({
            'id': 'sky',
            'type': 'sky',
            'paint': {
                'sky-type': 'atmosphere',
                'sky-atmosphere-sun': [0.0, 0.0],
                'sky-atmosphere-sun-intensity': 15
            }
        });
    });

    map.on("moveend", function() {
        updatePosition()
    });

    var updatePosition = function() {
        var settings = 'center: [' + map.getCenter().lng.toFixed(5) + ', ' + map.getCenter().lat.toFixed(5) + '],\n' +
            'zoom: ' + map.getZoom().toFixed(2) + ',\n' + 
            'pitch: ' + map.getPitch().toFixed(2) + ',\n' + 
            'bearing: ' + map.getBearing().toFixed(2) + '\n';
        
        position.innerText = settings;
    };
</script>

</body>
</html>